{template 'common/header'}
<div id="louie-edit" class="row" data-url="{php echo $this->createWebUrl('api')}" data-prev-page="{php echo $this->createWebUrl('activity')}">
    <script src="https://webapi.amap.com/maps?v=1.4.13&key={php echo $_setting['map_key']}"></script>
    <div id="louie-header">
        <h6 v-if="doing == 'add'">添加活动(普通模式)</h6>
        <h6 v-else>修改活动(普通模式)</h6>
        <a href="{php echo $this->createWebUrl('activity')}" class="btn btn-default btn-sm header-right-btn">活动列表</a>
    </div>

    <!--S创建宝箱经纬度遮罩层-->
    <div id="create-bz-lnglat" v-if="loading.status">
        <img :src="loading_img" />
        <h3>{{loading.text}}</h3>
    </div>
    <!--E创建宝箱经纬度遮罩层-->

    <!--S步骤导航-->
    <ul id="step-ul">
        <li v-for="(item,index) in step" v-bind:class="step_selected == item.value ? 'active':''" @click="clickStep(item.value)">{{item.text}}</li>
    </ul>
    <!--E步骤导航-->

    <!--S步骤控制-->
    <div id="step-control">
        <button class="btn btn-default" @click="stepPrev">上一步</button>
        {{step[step_selected-1].text}}
        <button class="btn btn-default" @click="stepNext">下一步</button>
    </div>
    <!--E步骤控制-->

    <!--S1:选择活动区域-->
    <div v-show="step[step_selected-1].value == 1" id="step1"  class="step col-xs-9 col-lg-9 col-md-9 row">
        <div class="form-group">
            <label>活动地址</label>
            <input type="text" v-model="address" class="form-control" placeholder="活动地址" />
        </div>
        <div class="form-group">
            <label>选择活动区域</label>
            <louie-map v-bind:address="address" v-bind:min-area="min_area" v-bind:m-coords="m_coords" @return-coords="returnCoords" v-bind:show-btn="status == 1"></louie-map>
        </div>
    </div>
    <!--E1:选择活动区域-->

    <!--S2:活动信息-->
    <div v-show="step[step_selected-1].value == 2" id="step2" class="step col-xs-9 col-lg-9 col-md-9 row">
        <div class="form-group">
            <label>活动名</label>
            <input type="text" v-model="name" name="name" class="form-control" placeholder="活动名" />
        </div>
        <div class="form-group">
            <label>活动响应关键词<img class="help-img" :src="help_img" data-toggle="tooltip" data-placement="top" title="公众号回复活动关键词返回活动入口链接" /></label>
            <input type="text" v-model="response_keyword" name="response_keyword" class="form-control" placeholder="活动响应关键词" v-bind:readonly="status>1" />
        </div>
        <div class="form-group">
            <label style="display: block;">地图是否开启3D模式</label>
            <select class="form-group" v-model="open3d" name="open3d" style="width:20%;">
                <option value="0">关闭</option>
                <option value="1">开启</option>
            </select>
        </div>
        <div class="form-group activity-cover">
            <label>活动封面</label>
            {php echo tpl_form_field_image('cover')}
        </div>
        <div class="form-group">
            <label style="display: block;">活动开始时间</label>
            <date-picker v-model="start_date" style="float:left;width:70%;" input-class="form-control" format="yyyy-MM-dd" v-bind:language="date.zh" v-bind:disabled="status>1"></date-picker>
            <div style="width:30%;float:left;">
                <select class="form-control" name="start_time" v-model="start_time" v-bind:disabled="status>1">
                    <option v-for="item in times" v-bind:value="item" v-bind:selected="item == start_time ? true : false">{{item}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label style="display: block;">活动结束时间</label>
            <date-picker v-model="end_date" style="float:left;width:70%;" input-class="form-control" format="yyyy-MM-dd" v-bind:language="date.zh"></date-picker>
            <div style="width:30%;float:left;">
                <select class="form-control" name="end_time" v-model="end_time">
                    <option v-for="item in times" v-bind:value="item" v-bind:selected="item == end_time ? true : false">{{item}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label>活动简介</label>
            <textarea name="brief" v-model="brief" class="form-control" placeholder="活动简介"></textarea>
        </div>
    </div>
    <!--E2:活动信息-->

    <!--S3:活动配置-->
    <div v-show="step[step_selected-1].value == 3" id="step3"  class="step col-xs-9 col-lg-9 col-md-9 row">
        <div class="form-group">
            <label>会员可开的宝箱数量(0=不限制)</label>
            <input type="text" v-model="init_bz_number" name="init_bz_number" class="form-control" placeholder="会员可开的宝箱数量" v-bind:disabled="status > 1" />
        </div>
        <div class="form-group">
            <label>打开宝箱的距离(建议5-10米)</label>
            <input type="text" v-model="open_distance" name="open_distance" class="form-control" placeholder="可打开宝箱的距离" />
        </div>
        <div class="form-group">
            <label>地图宝箱显示数量(0=系统自动计算显示数量，建议数量不超过1000)</label>
            <input type="text" v-model="bz_number" name="bz_number" class="form-control" placeholder="地图宝箱显示数量(0=系统自动计算显示数量)" />
        </div>
    </div>
    <!--E3:活动配置-->

    <!--S4:虚拟宝藏-->
    <div v-show="step[step_selected-1].value == 4" id="step4"  class="step col-xs-9 col-lg-9 col-md-9 row">
        <div class="form-group">
            <label>虚拟宝藏中奖率(当前实体宝藏的中奖率为:{{entity_win_odds}})<img class="help-img" :src="help_img" data-toggle="tooltip" data-placement="top" title="虚拟宝藏和实体宝藏同时投放有效,虚拟宝藏中奖率最小为0，最大为10。如果虚拟宝藏设置为10中奖率等于100%，实体宝藏等待虚拟宝藏投放完成后在投放" /></label>
            <input type="text" v-model="bz_win_odds" name="bz_win_odds" class="form-control" placeholder="虚拟宝藏中奖率" />
        </div>
        <div class="form-group">
            <label>活动投入资金</label>
            <input type="text" v-model="invest" name="invest" class="form-control" placeholder="活动投入资金" disabled="true" readonly="true" />
        </div>
        <div class="form-group">
            <label style="display: block;">宝藏列表(点击宝藏移除)</label>
            <dl class="bz-list" v-for="(item,index) in activity_bz" v-bind:key="item.id" v-on:click="clickBz(index)">
                <dt><img v-bind:src="item.icon_url" /></dt>
                <dd>{{item.name}}</dd>
                <dd>价值:{{item.money}}</dd>
                <dd>数量:{{item.number}}</dd>
                <dd>中奖率:{{item.win_odds}}</dd>
                <dd>用户最多获奖数:<span v-if="item.user_number > 0">{{item.user_number}}</span><span v-else>不限量</span></dd>
            </dl>
            <dl class="bz-list toggle-add-bz">
                <dt><span class="glyphicon glyphicon-plus add-bz" v-on:click="toggleBzList"></span></dt>
            </dl>
        </div>
    </div>
    <!--E4:虚拟宝藏-->

    <!--S5:投放实体宝藏-->
    <div v-show="step[step_selected-1].value == 5" id="step5"  class="step col-xs-9 col-lg-9 col-md-9 row">
        <div class="form-group">
            <label>实体宝藏中奖率(当前虚拟宝藏的中奖率为:{{bz_win_odds}})<img class="help-img" :src="help_img" data-toggle="tooltip" data-placement="top" title="虚拟宝藏和实体宝藏同时投放有效,实体宝藏中奖率最小为0，最大为10。如果实体宝藏设置为10中奖率等于100%，虚拟宝藏等待实体宝藏投放完成后在投放" /></label>
            <input type="text" v-model="entity_win_odds" name="entity_win_odds" class="form-control" placeholder="实体宝藏中奖率" />
        </div>
        <div class="form-group">
            <label>实体奖励兑换地址</label>
            <input type="text" v-model="entity_address" class="form-control" placeholder="实物奖励兑换地址" />
        </div>
        <dl class="entity-li" v-for="(item,index) in entity_list" v-on:click="clickEntity(index)">
            <dt><img v-bind:src="item.icon_url" /></dt>
            <dd>{{item.name}}</dd>
            <dd>价值:{{item.money}}</dd>
            <dd>数量:{{item.number}}</dd>
            <dd>中奖率:{{item.win_odds}}</dd>
            <dd>用户最多获奖数:{{item.user_number}}</dd>
        </dl>
        <dl class="entity-li toggle-add-bz">
            <dt><span class="glyphicon glyphicon-plus add-entity" v-on:click="clickAddEntity"></span></dt>
        </dl>
    </div>
    <!--E5:投放实体宝藏-->

    <!--S6:活动说明-->
    <div v-show="step[step_selected-1].value == 6" id="step6"  class="step col-xs-12 col-lg-12 col-md-12 row">
        <button class="btn btn-warning" v-if="explain_status == 0" style="margin-bottom: 10px;">活动说明待审核</button>
        <div ref="editor"></div>
    </div>
    <!--E6:活动说明-->


    <!--S添加宝藏-->
    <div  id="add-bz-box" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                    <h4 class="modal-title">活动宝藏</h4>
                </div>
                <div class="modal-body">
                    <div class="col-xs-6 left">
                        <h5>活动宝藏(点击宝藏移除)</h5>
                        <dl class="bz-list" v-for="(item,index) in activity_bz" v-bind:key="item.id" v-on:click="clickBz(index)">
                            <dt><img v-bind:src="item.icon_url" /></dt>
                            <dd>{{item.name}}</dd>
                            <dd>价值:{{item.money}}</dd>
                            <dd>数量:{{item.number}}</dd>
                            <dd>中奖率:{{item.win_odds}}</dd>
                            <dd>用户最多获奖数:<span v-if="item.user_number > 0">{{item.user_number}}</span><span v-else>不限量</span></dd>
                        </dl>
                    </div>
                    <div class="col-xs-6 right">
                        <h5>系统宝藏</h5>
                        <dl class="bz-list" v-for="(item,index) in bz_list" v-on:click="clickSystem(index)" v-bind:key="item.id">
                            <dt><img v-bind:src="item.icon_url" /></dt>
                            <dd>{{item.name}}</dd>
                        </dl>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!--E添加宝藏-->

    <!--S宝藏定价-->
    <div  id="pricing" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                    <h4 class="modal-title">宝藏配置</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>宝藏价值(可兑换多少人民币)</label>
                            <input type="text" v-model="money" class="form-control" placeholder="宝藏价值(可兑换多少人民币)" />
                        </div>
                        <div class="form-group">
                            <label>投放数量</label>
                            <input type="text" v-model="number" class="form-control" placeholder="宝藏投放数量" />
                        </div>
                        <div class="form-group">
                            <label>每个用户最多获取数量(0=不限制)</label>
                            <input type="text" v-model="user_number" class="form-control" placeholder="每个用户最多获取数量(0=不限制)" />
                        </div>
                        <div class="form-group">
                            <label>中奖几率<img class="help-img" :src="help_img" data-toggle="tooltip" data-placement="top" title="1代表中奖率为100%，10代表每10个用户可能有一个用户中奖，以此类推，数字越大中奖率越低。多个中奖几率为1则随机投放其中一个" /></label>
                            <input type="text" v-model="win_odds" class="form-control" placeholder="中奖几率" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" v-on:click="addBz" v-if="bz_doing == 'add'">确认</button>
                    <button type="button" class="btn btn-primary" v-on:click="editBz" v-else>修改</button>
                </div>
            </div>
        </div>
    </div>
    <!--E宝藏定价-->

    <!--S添加修改实物区域-->
    <div class="modal fade" id="add-entity-box" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" v-if="entity_doing == 'add'">添加实物</h4>
                    <h4 class="modal-title" v-else>修改实物</h4>
                </div>
                <div class="modal-body">
                    <form action="" method="post" name="edit_entity">
                        <div class="form-group">
                            <label>实物名称</label>
                            <input type="text" v-model.trim="entity_name" class="form-control" placeholder="实物名" />
                        </div>
                        <div class="form-group">
                            <label>实物价值</label>
                            <input type="text" v-model.trim="money" class="form-control" placeholder="实物价值" />
                        </div>
                        <div class="form-group">
                            <label>投放数量</label>
                            <input type="text" v-model.trim="number" class="form-control" placeholder="实物投放数量" />
                        </div>
                        <div class="form-group">
                            <label>每个用户最多获取数量(0=不限制)</label>
                            <input type="text" name="user_number" v-model.trim="user_number" class="form-control" placeholder="每个用户最多获取数量" />
                        </div>
                        <div class="form-group">
                            <label>中奖几率</label>
                            <input type="text" v-model.trim="win_odds" class="form-control" placeholder="实物的中奖几率" />
                        </div>
                        <div class="form-group entity-icon-img">
                            <label>实物图片</label>
                            {php echo tpl_form_field_image('entity_icon')}
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" v-on:click="submitEntity">
                        <template v-if="entity_doing == 'add'">确认添加</template>
                        <template v-else>确认修改</template>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--E添加修改实物区域-->

    <!--S添加修改按钮-->
    <div class="col-xs-9 col-lg-9 col-md-9 row" v-if="(step_selected >= 4) || doing=='edit'" style="margin-top: 10px;">
        <button id="submit" class="btn btn-default" @click="clickSubmit">
            <span v-if="doing == 'add'">创建活动</span>
            <span v-else>修改活动</span>
        </button>
    </div>
    <!--E添加修改按钮-->

    <v-dialog style="z-index:99999999999;" />

</div>
<script src="../addons/kuyuan_vbz/dist/web/activity-edit-default.js"></script>
{template 'common/footer'}
